<template>
    <div>
        <topheader></topheader>
        <div class="container">
            <div class="search-panel">
                <input class="accout-address" v-model="minerAddr" type="text" placeholder="账号地址" />
                <button class="search-btn phone-hide" @click="minerDetail" type="button">查看挖矿状态</button>
                <button class="search-btn pc-hide" @click="minerDetail" type="button"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        <div class="container-fluid well">
            <div class="container">
                <div class="row">
                    <p class="block-tips">矿池支付所有的区块奖励，包括交易手续费并承担支付的手续费</p>
                    <div class="block-types">
                        <span v-bind:class="{active: (showTab==1)}" @click="changeTab(1)" style="cursor:pointer">已挖到的成熟块<span class="num">{{confirmedNum}}</span></span>
                        <b style="margin:0px 10px 0px 10px;">/</b>
                        <span v-bind:class="{active: (showTab==2)}" @click="changeTab(2)" style="cursor:pointer">未成熟的块<span class="num">{{pendingNum}}</span></span>
                    </div>
                    <div class="block_content">
                        <table class="table table-bordered t-ct" style="font-size:16px;table-layout:fixed">
                            <thead>
                                <tr>
                                    <th width="20%">区块高度</th>
                                    <th width="50%" class="phone-hide">区块哈希</th>
                                    <th width="50%">奖励</th>
                                    <th width="30%">发现时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="data in dataList" v-bind:key="data.txhash">
                                    <td style="word-break:break-word">
                                        <a v-bind:href="'https://chainz.cryptoid.info/btx/block.dws?'+data.height+'.htm'" target="_blank">{{data.height}}</a>
                                    </td>
                                    <td class="text-hidden phone-hide">
                                        <a v-bind:href="'https://chainz.cryptoid.info/btx/block.dws?'+data.blockhash+'.htm'" target="_blank">{{data.blockhash}}</a>
                                    </td>
                                    <td class="text-hidden">
                                        {{data.amount.toFixed(4)}}
                                    </td>
                                    <td style="word-break:break-word">
                                        {{api.dateFormat(data.time*1000, "yyyy-MM-dd hh:mm:ss")}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import topheader from '@/components/common/top_header.vue';
    let datas = [];
    let formatDate = function(dtime) {
        let timeStr = "";
        let t = new Date();
        t.setTime(dtime);
        timeStr += t.getFullYear();
        timeStr += "-";
        if(t.getMonth() < 9) {
            timeStr += ("0" + (t.getMonth() + 1));
        } else {
            timeStr += (t.getMonth() + 1);
        }
        timeStr += "-";
        timeStr += (t.getDate() < 10) ? ("0" + t.getDate()) : (t.getDate());
        timeStr += " ";
        timeStr += (t.getHours() < 10) ? ("0" + t.getHours()) : (t.getHours());
        timeStr += ":";
        timeStr += (t.getMinutes() < 10) ? ("0" + t.getMinutes()) : (t.getMinutes());
        timeStr += ":";
        timeStr += (t.getSeconds() < 10) ? ("0" + t.getSeconds()) : (t.getSeconds());
        return timeStr;
    }
    export default {
        name: "block",
        data() {
            return {
                dataList: [],
                confirmedNum: "",
                pendingNum: "",
                showTab: 1,
                confirmedBlocks: [],
                pendingBlocks: [],
                minerAddr: ""
            }
        },
        methods: {
            minerDetail() {
                this.$router.push({
                    path: "/miner",
                    query: {
                        addr: this.minerAddr
                    }
                });
            },
            changeTab(tab) {
                if(tab == 1) {
                    this.showTab = 1;
                    this.dataList = this.confirmedBlocks;
                } else if(tab == 2) {
                    this.showTab = 2;
                    this.dataList = this.pendingBlocks;
                }
            }
        },
        mounted() {
            let that = this;
            this.api.get({
                url: "/blocklist.shtml",
                data: {},
                callback: function(data) {
                    if(data.hasOwnProperty("error")) {
                        return;
                    }
                    if(data.data) {
                        data.data.sort(function(a, b) {
                            return (b.time - a.time);
                        });
                        for(var i = 0; i < data.data.length; i ++) {
                            if(data.data[i].category == "immature") {
                                that.pendingBlocks.push(data.data[i]);
                            } else {
                                that.confirmedBlocks.push(data.data[i]);
                            }
                        }
                        that.dataList = that.confirmedBlocks;
                        that.confirmedNum = that.confirmedBlocks.length;
                        that.pendingNum = that.pendingBlocks.length;
                    }
                    /*that.confirmedNum = data.datas.confirmed_num;
                    that.pendingNum = data.datas.pending_num;
                    let tempData = data.datas.confirmed_blocks;
                    that.confirmedNum = data.datas.confirmed_num;
                    for(let i = 0; i < tempData.length; i ++) {
                        that.confirmedBlocks.push({
                            "dheight": tempData[i].split(":")[2],
                            "dhash": tempData[i].split(":")[0],
                            "ftime": formatDate(parseInt(tempData[i].split(":")[4]))
                        });
                    }
                    that.dataList = that.confirmedBlocks;
                    tempData = data.datas.pending_blocks;
                    for(let i = 0; i < tempData.length; i ++) {
                        that.pendingBlocks.push({
                            "dheight": tempData[i].split(":")[2],
                            "dhash": tempData[i].split(":")[0],
                            "ftime": formatDate(parseInt(tempData[i].split(":")[4]))
                        });
                    }*/
                }
            });
        },
        components: {
            topheader
        }
    }
</script>
<style lang="scss" scoped>
    .block-tips {
        color:#333333;
        font-size: 24px;
        font-weight: bold;
        margin: 30px 0px 20px 0px;
    }
    .block-types {
        text-align: center;
        font-size: 24px;
        margin: 50px 0px 30px 0px;
    }
    .block-types .active {
        color: #658ec1;
    }
    .block_content table {
        text-align: center;
    }
    .block_content table th {
        font-size: 24px;
        color: #333333;
        font-weight: normal;
    }
    .block_content table td {
        font-size:16px;
    }
    .block-types {
        color: #666666;
    }
    .block-types .active .num {
        color: #ef8d59;
    }
</style>